<template>
  <dynamic-table ref="tableRef" :columns="columns" :page-option="{clienthash}" :get-list-func="clientUser" rowKey="userid" :row-selection="rowSelection" :bordered="false">
    <template v-slot:title>
      <a-button @click="accountManage" v-permission="{ action: 'clientuser:update', effect: 'disabled' }" :disabled="rowSelection.selectedRowKeys.length == 0" type="primary">
        编辑
      </a-button>
    </template>
  </dynamic-table>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs, watch, computed, nextTick, ref} from 'vue'
import {Button} from 'ant-design-vue'
import DynamicTable from '@/components/dynamic-table.vue'
import { useCreateModal} from "@/hooks"
import {clientUser} from '@/api/client'
import AddModal from './add-modal.vue'
import {formatDate} from "@/utils/common"
import {columns} from "./columns"
import {permission} from '@/directives/permission'

export default defineComponent({
  name: 'account-manage',
  components: {
    [Button.name]: Button,
    DynamicTable
  },
  props: ['clienthash'],
  directives: {permission},
  setup(props) {
    const tableRef = ref<any>(null)

    const state = reactive({
      data: [],
      uploading: false,
      tableLoading: false,
      rowSelection: {
        hideDefaultSelections: true,
        onChange: (selectedRowKeys, selectedRows) => {
          state.rowSelection.selectedRowKeys = selectedRowKeys.slice(-1)
        },
        selectedRowKeys: []
      },
    })

    // 编辑用户
    const accountManage = () => {
      const userid = state.rowSelection.selectedRowKeys.toString()
      useCreateModal(AddModal, {
        fields: tableRef.value.data.find(item => item.userid == userid),
        callback: () => {
          tableRef.value.refreshTableData()
        }
      })
    }

    return {
      ...toRefs(state),
      columns,
      accountManage,
      tableRef,
      formatDate,
      clientUser
    }
  }
})
</script>
